<template>
	<view class="content">
		<view class="navbar"></view>
		<image :src="src" mode="widthFix" class="image-full" @longpress="saveImage" />
		<view class="d-flex align-items-center justify-center"><text>长按保存图片</text></view>
		<view class="over-hide-dom hide-canvas"><canvas canvas-id="canvas" :style="{ height: `${imgHeight}px`, width: `${imgWidth}px` }"></canvas></view>
	</view>
</template>

<script>
import {isEmpty, isEmptyObj} from '../../utils';	
import {
	mapState,
} from 'vuex';
export default {
	data() {
		return {
			src: '',
			imgWidth: 100,
			imgHeight: 100
		};
	},
	onLoad() {
		if(!this.token){
			return uni.navigateTo({
				url:'/pages/public/login'
			})
		}
		this.loadData()
	},
	computed: {
		...mapState('user',['token']),
	},
	onShow() {
		if(isEmpty(this.src)){
			this.loadData();
		}
	},
	methods: {
		saveImage(){
			uni.showLoading({'title':"保存中..."}); 
			uni.downloadFile({
				url: this.src,
				success: (res) =>{
					if (res.statusCode === 200){
						uni.hideLoading(); 
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: function() {
								uni.showToast({
									title: "保存成功",
									icon: "none"
								});
							},
							fail: function() {
								uni.showToast({
									title: "保存失败，请稍后重试",
									icon: "none"
								});
							}
						});
					}
				}
			})
		},
		//加载图片
		async loadData(){
			console.log(this.token);
			this.$ajax.get('member/shareimg',{token:this.token}).then(data=>{
				console.log(data)
				if(0==data.error){
					this.src= data.data
					return ;
				}else{
					this.$api.msg(data.msg);
				}
			})
		},
	}
};
</script>

<style lang="scss">
.image-full {
	width: 100%;
}
.over-hide-dom {
	visibility: hidden !important;
	overflow: hidden !important;
	height: 0 !important;
}

.hide-canvas {
	position: fixed;
	top: -9999999999999rpx;
}
</style>

